{% extends "base.html" %}

{% block content %}
    <!-- DATA TABLE-->
    <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--h3 class="title-5 m-b-35"></h3-->
                    <div class="table-data__tool">
                        <div class="table-data__tool-left">
                            <div class="rs-select2--light rs-select2--md">
                                <select id="level-select" class="js-select2" name="property">
                                    <option {% if selected_level == "" %} selected="selected" {% endif %} value="">所有等级</option>
                                    <option {% if selected_level == "0" %} selected="selected" {% endif %} value="0">调试信息</option>
                                    <option {% if selected_level == "1" %} selected="selected" {% endif %} value="1">通知信息</option>
                                    <option {% if selected_level == "2" %} selected="selected" {% endif %} value="2">警告信息</option>
                                    <option {% if selected_level == "3" %} selected="selected" {% endif %} value="3">错误信息</option>
                                    <option {% if selected_level == "4" %} selected="selected" {% endif %} value="4">危机信息</option>
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <div class="rs-select2--light rs-select2--md">
                                <select id="date-select" class="js-select2" name="time">
                                    {% for date in dates %}
                                    <option {% if date|date:"Y-m-d" == selected_date %}selected="selected"{% endif %} value="{{ date|date:"Y-m-d" }}">{{ date|date:"Y-m-d" }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <button class="au-btn-filter" onclick="filter();">
                                <i class="zmdi zmdi-filter-list"></i>筛选</button>
                        </div>
                        <div class="table-data__tool-right">
                            <button class="au-btn au-btn-icon au-btn--blue au-btn--small">导出</button>
                        </div>
                    </div>
                    <div class="table-responsive m-b-40">
                        <table class="table table-borderless table-data3">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>通知时间</th>
                                    <th>模块</th>
                                    <th>通知等级</th>
                                    <th>通知信息</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in logs %}
                                    <tr>
                                        <td>{{ log.id }}</td>
                                        <td>{{ log.timestamp }}</td>
                                        <td>{{ log.get_module_display }}</td>
                                        {% if log.level == 0 %}
                                            <td style="color:#00ad5f">调试信息</td>
                                        {% elif log.level == 1 %}
                                            <td style="color: #4272d7">通知信息</td>
                                        {% elif log.level == 2 %}
                                            <td style="color: #ffc107">警告信息</td>
                                        {% elif log.level == 3 %}
                                            <td style="color: #ff4b5a">错误信息</td>
                                        {% elif log.level == 4 %}
                                            <td style="color: #530000">危机信息</td>
                                        {% endif %}
                                        <td>{{ log.message|safe }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END DATA TABLE-->
{% endblock %}


{% block jsscript %}
    <script>
        function filter() {
            var levelSelect = $('#level-select').val();
            var dateSelect = $('#date-select').val();
            window.location = "/log/?level=" + levelSelect  + "&timestamp__date=" + dateSelect;
        }
        $(function () { $("[data-toggle='tooltip']").tooltip(); });
    </script>
{% endblock %}